<template>
    <div class="song-lyric">
        <!-- 有歌词 -->
        <ul class="has-lyric" v-if="lyr.length" key="index">
            <li v-for="(item,index) in lyr" v-bind:key="index">
                {{item[1]}}
            </li>
        </ul>
        <!-- 没有歌词 -->
        <div v-else class="no-lyric" key="no-lyric">
            <span>暂无歌词</span>
        </div>
    </div>
</template>

<script>
    import {mixin} from '../minx/index'
    import {mapGetters} from 'vuex'
    export default {
        name: "Lyric",
        mixins: [mixin],
        data(){
            return {
                lyr: []         //当前歌曲的歌词
            }
        },
        components:{

        },
        computed: {
            ...mapGetters([
                'curTime',      //当前歌曲播放到的位置
                'id',           //当前播放的歌曲id
                'lyric',        //歌词
                'listIndex',    //当前歌曲在歌单中的位置
                'listOfSongs',  //当前歌单列表
            ])
        },
        created(){
            this.lyr = this.lyric;
        },
        watch:{
            id:function(){
                this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
            },
            curTime: function(){
                if(this.lyr.length>0){
                    for(let i=0;i<this.lyr.length;i++){
                        if(this.curTime>=this.lyr[i][0]){
                            for(let j=0;j<this.lyr.length;j++){
                                document.querySelectorAll('.has-lyric li')[j].style.color = '#000';
                                document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';
                            }
                            if(i>=0){
                                document.querySelectorAll('.has-lyric li')[i].style.color = '#48658f';
                                document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';
                            }
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    ul,li{
        margin: 0;
        padding: 0;
    }
    .song-lyric{
        z-index: 700;
        padding-top: 1em;
        padding-bottom: 90px;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
</style>
